<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-bind="dialogOpts"
    v-el-drag-dialog
  >
    <component is-dialog :is="component" v-bind="componentOpts" v-if="isReady"></component>
  </el-dialog>
</template>
<script>
import Sql from '../sql'
import CallChainDetail from '../call-chain-detail'
export default {
  props: {
    component: {
      type: String,
      default: 'CallChainDetail'
    }
  },
  components: {
    Sql,
    CallChainDetail
  },
  data() {
    return {
      isReady: true,
      dialogVisible: false,
      dialogOpts: {
      },
      componentOpts: {
      }
    }
  },
  methods: {
    open(options) {
      this.dialogVisible = true
      this.isReady = false
      this.dialogOpts = options.dialog
      this.componentOpts = options.component
      this.$nextTick(() => {
        this.isReady = true
      })
    }
  }
}
</script>
